<template>
	<view class="content">
		<!-- slot 替换默认的样式 -->
		<!-- <uni-nav>
		    <view class="status-bar-box">
		        <view class="select-city">
		             <image src="/static/img/index/icon-city.png"></image>
		             <view class="">杭州市</view>
		        </view>
		        <view class="status-bar-title">汽车租赁</view>
		    </view>
		</uni-nav> -->
		<!-- <view class="search">
			<view class="left" style="display: flex;align-items: center;color: #999;font-weight: normal;">
				<image src="@/static/search.png" style="width: 40rpx;margin:0 20rpx;height: 40rpx;" mode=""></image>
				<input v-model="words" type="text" placeholder="请输入搜索内容" name="" id="">
			</view>
			<view class="right" @click="showprolist(1)">搜索</view>
		</view>
		-->
		
		<!-- 轮播 -->
		<swiper class="banner" indicator-dots="true" autoplay="true" v-if="bannerList.length!=0">
			<template v-for="(item, index) in bannerList">
				<swiper-item :key="index" @click="enterBanner(index)">
					<image :src="item.image" mode="aspectFill"></image>
				</swiper-item>
			</template>
		</swiper>
		
		<!-- 公告 -->
		<view class="notice">
			<view class="left">
				<text style="color: #000;">平台</text> 公告
			</view>
			<view class="right" @click="enterNotice()">
				<swiper :vertical="true" autoplay="true"
					style="width: 500rpx;height: 50rpx;line-height:50rpx;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
					<template v-for="(item, index) in noticeList"
						style="width: 500rpx;height: 50rpx;line-height:50rpx;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;">
						<swiper-item
							style="width: 500rpx;height: 50rpx;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;"
							:key="index" @click="enterBanner(index)">
							<view style="width: 500rpx;height: 50rpx;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;font-size: 30rpx;">
								<text class="card-title">{{item.name}}</text>
							</view>
						</swiper-item>
					</template>
				</swiper>
			</view>
		</view>
		
		<!-- 导航区 -->
		<view class="nav" v-if="navList.length!=0">
			<view class="resvih" v-for="(item, index) in navList" :key="index" @click="enterShopList(item.id,item.image_url)">
				<image class="thumb" :src="item.image" />
				<view class="title">{{item.name}}</view>
				<view class="sales">{{item.sales}}</view>
			</view>
		</view>
		
		<!-- 商品列表（推荐） -->
		<view class="goods">
		  <view class="item" v-for="(item, index) in goodsList" @click="onGoodsItem(item.sku_id)">
			<image class="image" :src="item.image" mode="aspectFill"></image>
			<view class="bottom">
				<view class="name">{{item.name}}</view>
				<view class="price">￥{{item.sell_price}}</view>
				<view class="sales">
					<text>已售{{item.sales}}</text>
					<image class="cart" src="../../static/cartdown.png"></image>
				</view>
			</view>
		  </view>
		</view>
		
	</view>
</template>

<script>
	
	import {Banner} from '@/utils/model/banner-model.js';
	var banner = new Banner();
	import {Notice} from '@/utils/model/notice-model.js';
	var notice = new Notice();
	import { Nav } from '@/utils/model/nav-model.js';
	var nav = new Nav();
	import { Goods } from '@/utils/model/goods-model.js';
	var goods = new Goods();
	
	export default {
		data() {
			return {
				bannerList: [],
				noticeList: [],
				navList: [],
				goodsList: []
			}
		},
		onLoad() {
			banner.getList().then(res => {
				if (res.code == 1) {
					this.bannerList = res.data.list
				}
			}).catch(err => {
				console.log(err)
			})
			
			notice.getList().then(res => {
				if (res.code == 1) {
					this.noticeList = res.data.list
				}
			}).catch(err => {
				console.log(err)
			})
			
			nav.getList().then(res => {
				if (res.code == 1) {
					this.navList = res.data.list
				}
			}).catch(err => {
				console.log(err)
			})
			
			goods.getList().then(res => {
				if (res.code == 1) {
					this.goodsList = res.data.list
				}
			}).catch(err => {
				console.log(err)
			})
		},
		
		methods: {
			onGoodsItem(sku_id){
				uni.navigateTo({
					url: '/pages/goods/detail?id='+sku_id
				})
			}
		},
		/**
		 * 设置分享内容
		 */
		onShareAppMessage() {
		  const app = this
		  return {
		    title: '丽湾饰品',
		    path: '/pages/index/index?'
		  }
		},
		
		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
		  const app = this
		  return {
		    title: '丽湾饰品',
		    path: '/pages/index/index'
		  }
		}
	}
</script>

 
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
 
<style scoped lang="scss">
	@import '~@/pages/index/index.scss';
</style>

